<!-- 历史告警信息的表格 -->
<template>
  <div class="q-pa-md bg-white" id="history_wran_info">
    <q-table
       flat
       title="Treats"
       :rows="dataList"
       :columns="columns"
       no-data-label="暂无数据"
       no-results-label="过滤器没有发现任何结果"
       row-key="name"
       :visible-columns="visibleColumns"
       v-model:pagination="pagination"
       hide-pagination
       :loading="loading"
       binary-state-sort
     >
          <!-- 表格的加载状态 -->
        <template v-slot:loading>
          <q-inner-loading showing color="grey" />
        </template>
          <!-- 表格顶部 -->
        <template v-slot:top>
          <div style="width: 200px" class="q-mt-xs q-mr-sm" >
            <q-select dense outlined options-dense v-model="headerSeach" :options="selectSeach" />
          </div>
          <div v-show="headerSeach" style="width: 200px" class="q-mr-sm q-mt-xs">
            <q-input  outlined v-model="queryList[seachContent[headerSeach]]" dense />
          </div>
          <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated padding="8px 8px 7px" icon="search" color="primary" label="搜索" @click="handlerSearch" />
          <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated padding="8px 8px 7px" color="primary" label="复位搜索" @click="handleResetSearch" />
          <q-space />
          <q-select
            v-model="visibleColumns"
            multiple
            outlined
            dense
            options-dense
            :display-value="'表头选择'"
            emit-value
            map-options
            :options="columns"
            option-value="name"
            options-cover
            style="min-width: 150px"
            class="q-mr-sm q-mt-xs"
          />
          <q-btn
            flat round dense
            :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
            @click="toggleFullscreen"
            class="q-mt-xs"
          />
        </template>
          <!-- 无数据提示信息 -->
        <template v-slot:no-data="{ message }">
          <div class="full-width row flex-center text-accent q-gutter-sm">
            <span>
              {{ message }}
            </span>
          </div>
        </template>
          <!-- 表格头部 -->
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
            >
              {{ col.label }}
              <q-icon v-if="col.isSort" class="cursor-pointer" size="18px" :name="pagination.descending?'expand_less':'expand_more'" @click="handlerSort"></q-icon>
            </q-th>
          </q-tr>
        </template>
          <!-- 表格主体 -->
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
            >
              {{ col.value }}
            </q-td>
          </q-tr>
        </template>

    </q-table>
    <!-- 分页 -->
    <Pagination
      :pageSizes="['10条/页','20条/页','30条/页','50条/页']"
      @updatePage="updatePage"
      @updateSizes="updateSizes"
      :pagination="pagination"
      @handlerRefresh="handlerRefresh"
    />
  </div>
</template>

<script>
import { ref } from 'vue'
import { featchEventList } from 'src/api/eventWarn'
import Pagination from 'src/components/pagination'

export default {
  data () {
    return {
      dataList: [],
      filter: ref(''),

      columns: [
        { name: 'idIndex', required: true, label: 'ID', align: 'center', field: 'idIndex', isSort: true },
        { name: 'title', required: true, label: '标题', align: 'center',field: 'title' },
        { name: 'content', align: 'center', label: '内容', field: 'content' },
        { name: 'create_time', align: 'center', label: '创建时间', field: 'create_time' },
        { name: 'readed_time', align: 'center', label: '已读时间', field: 'readed_time' },
        { name: 'receiver_name', align: 'center', label: '接收人', field: 'receiver_name' }
      ],

      // 表格头部
      headerSeach: ref(''),
      seachContent: {
       '类型':  'type',
        '标题': 'title',
        '内容': 'content',
        '创建时间': 'create_time',
        '已读时间': 'readed_time',
        '接收人': 'receiver_name',
      },
      selectSeach: [
        '', '类型','标题','内容','创建时间','已读时间','接收人'
      ],
       // 右侧表头选择
       visibleColumns: ref([ 'idIndex','type','title','content','create_time', 'readed_time', 'receiver_name']),

       pagination: { // 分页
        sortBy: 'desc', // 列名
        descending: false, // 是否按照降序排序
        page: 1, // 页码（当前显示第几页的数据）
        rowsPerPage: 10, // 每页多少行
        rowsNumber: 10 // 共多少条
      },
      queryList: {
        page: 1,
        page_size: 10,
        ordering: 'id'
      },
      loading: false // 表格的加载状态
    };
  },

  components: {
    Pagination
  },

  computed: {
  },

  watch: {
  },

  mounted() {
    this.getList()
  },

  methods: {
    // 刷新
    handlerRefresh() {
      this.handleResetSearch()
    },
    /**
     * 搜索
     */
    handlerSearch() {
      this.getList()
    },
    /**
     * 复位搜索
     */
    handleResetSearch() {
      this.pagination = {
        sortBy: 'desc',
        descending: false,
        page: 1,
        rowsPerPage: 10
      }
      this.queryList = {
        page: 1,
        page_size: 10,
        ordering: 'id'
      }
      this.headerSeach = ''
      this.getList()
    },
    /**
     * 排序
     */
    handlerSort() {
      this.pagination.descending = !this.pagination.descending
      this.getList()
    },
    /**
     * 获取设备列表
     */
    getList() {
      this.loading = true
      this.queryList.page = this.pagination.page
      this.queryList.page_size = this.pagination.rowsPerPage
      this.queryList.ordering = this.pagination.descending?'-id':'id'
      this.queryList.is_read = 'True'
      this.queryList.receiver_id = localStorage.getItem('user_id_ccims')
      // 时间正则匹配
      let resDateTime = /^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9])|(?:[1-3][0-1])) (?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]:[0-5][0-9]$/
      if (this.queryList.create_time && !resDateTime.test(this.queryList.create_time.trim())) {
        this.$q.notify({
          type: 'warning',
          position: 'top',
          message: "时间格式为 '2021-09-05 01:01:02'"
        })
        this.loading = false
        return
      }
      if (this.queryList.readed_time && !resDateTime.test(this.queryList.readed_time.trim())) {
        this.$q.notify({
          type: 'warning',
          position: 'top',
          message: "时间格式为 '2021-09-05 01:01:02'"
        })
        this.loading = false
        return
      }
      featchEventList(this.queryList).then(res => {
        let { status, data, totalCounts } = res
        if (status === 200) {
          this.dataList = []
          if (data && data.length > 0) {
            data.forEach((item, index) => {
              let _time
              let _create
              if (item.readed_time) _time = item.readed_time.substr(0, 10) +' '+ item.readed_time.substr(11, 8)
              if (item.create_time) _create = item.create_time.substr(0, 10) +' '+ item.create_time.substr(11, 8)

              // 处理序号
              if (!this.pagination.descending) {
                item.idIndex = index + 1 + (this.queryList.page - 1) * this.queryList.page_size
              } else {
                item.idIndex = totalCounts - index - (this.queryList.page - 1) * this.queryList.page_size
              }

              this.dataList.push({
                id: item.id,
                idIndex: item.idIndex,
                title: item.title,
                content: item.content,
                create_time: _create,
                readed_time: _time,
                receiver_name: item.receiver_name
              })
            })
          }
          this.pagination.rowsNumber = totalCounts
        }
        this.loading = false
      }).catch(_ => {
        this.loading = false
      })
    },
    // 切换当前页数
    updatePage(val) {
      if (!val) return
      this.pagination.page = val*1
      this.getList()
    },
    // 切换每页的行数
    updateSizes(val) {
      this.pagination.rowsPerPage = parseFloat(val)
      this.getList()
    },
    /**
     * 全屏
     */
    toggleFullscreen() {
      this.$nextTick(_ => {
        const dom = document.getElementById('history_wran_info')
        this.$q.fullscreen.toggle(dom).then(_ => {
        }).catch(error => {
          console.log(error)
        })
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
